<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 
        一.固定参数 
            一些指令能够接收一个“参数”，在指令名称之后以冒号表示
        二.动态参数
            注意：
            1.动态参数预期返回时一个字符串，非字符串都会触发警告
            2.动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的
            3.在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，
            因为浏览器会把 attribute 名全部强制转为小写
    -->

    <!-- v-bind 指令可以用于响应式地更新 HTML attribute -->
    <div id="app">
        <!-- 固定参数，给 url 动态赋值 -->
        <a v-bind:href="url">点我跳转到VUE官网</a>
        <br>

        <!-- 动态参数，给someplace 赋值为href属性 -->
        <!-- <a v-bind:[someplace]="https://cn.vuejs.org/">点我跳转到VUE官网</a> -->
        <!-- 
            这么写会报错:
            invalid expression: Unexpected token ':' in https://cn.vuejs.org/

            即使改为"www.baidu.com"也会报错，因为VUE在解析的时候是先解析到了 "https://cn.vuejs.org/"字符串，
            然后才解析 someplace，而后者是动态赋值的。 所以<a v-bind:="https://cn.vuejs.org/"> 无法解析，
            就报错了
         -->

        <!-- 二者结合使用 -->
        <a v-bind:[someplace]="url">点我跳转到VUE官网</a>
    </div>

</body>

</html>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: "https://cn.vuejs.org/",
            someplace: "href",
        }
    })

</script>